<!--
 * @Author: wangyu
 * @Date: 2024-12-26 21:52:47
 * @LastEditTime: 2024-12-27 13:44:22
 * @LastEditors: wangyu
 * @Description: 企业详情对象
 * @FilePath: \dzsq-smartpark-platform\src\views\detailed\components\business-item.vue
-->
<template>
  <div class="businessItem" :class="data.active && 'active'">
    <div class="businessItemHeader"></div>
    <div class="businessItemContent">
      <div class="businessItemContent-icon">
        <img src="@/assets/imgs/u526_div.png" />
      </div>
      <div class="businessItemContent-info">
        <div>
          <div>门牌ID：</div>
          <div>{{ data.mpId }}</div>
        </div>
        <div>
          <div>建筑面积：</div>
          <div>{{ data.jzmj }}</div>
        </div>
        <div>
          <div>已收/需收租金(元)：</div>
          <div>
            <span :style="{ color: getColor(data.yszj, data.xszj) }">{{
              data.yszj
            }}</span>
            /{{ data.xszj }}
          </div>
        </div>
        <div>
          <div>企业名称：</div>
          <div>{{ data.qymc }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  data: Object,
});
const getColor = (yszj, xszj) => {
  if (yszj === xszj) {
    return;
  }
  if (Number(yszj) === 0) {
    return "red";
  } else {
    return "#ff7e00";
  }
};
</script>
<style scoped lang="scss">
.active {
  background-image: url(@/assets/imgs/u640_selected.svg);
}
.businessItem {
  &:hover {
    background: rgba(7, 166, 255, 0.2);
  }
}
.businessItemHeader {
  position: relative;
  height: 16px;

  &::before {
    content: "";
    position: absolute;
    height: 4px;
    width: 67px;
    right: 16px;
    top: 0;
    background-image: url(@/assets/imgs/u523.svg);
    background-repeat: no-repeat;
  }
  &::after {
    content: "";
    position: absolute;
    height: 5px;
    right: 16px;
    left: 0;
    bottom: 0px;
    background-image: url(@/assets/imgs/u522.svg);
    background-repeat: no-repeat;
    background-size: cover;
  }
}
.businessItemContent {
  font-size: 16px;
  display: flex;
  padding: 12px 16px 12px 16px;
  align-items: center;
  cursor: pointer;
  &-icon {
    width: 140px;
    height: 90px;
    > img {
      width: 100%;
      height: 100%;
    }
  }
  &-info {
    flex: 1;
    font-size: 14px;
    margin-left: 16px;
    > div {
      display: flex;
      line-height: 24px;
      > div {
        flex: 1;
        &:first-child {
          flex: 1.5;
        }
        &:last-child {
          // overflow: hidden;
          // text-overflow: ellipsis;
          white-space: nowrap;
          text-align: center;
        }
      }
    }
  }
}
</style>
